<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JWT API 测试平台</title>
    <link href="libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="libs/fontawesome/css/all.min.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />
    <script src="libs/jquery/jquery-3.5.1.min.js"></script>
    <script src="libs/bootstrap/js/bootstrap.min.js"></script>
    <script src="libs/ace/ace.js"></script>
    <script src="libs/ace/ext-beautify.js"></script>
    <script src="libs/ace/ext-language_tools.js"></script>
    <script src="libs/ace/ext-code_lens.js"></script>
    <script src="libs/ace/ext-textarea.js"></script>
</head>

<body>
    <div class="container">
        <div class="main-header">
            <h1><i class="fas fa-shield-alt"></i> JWT API 测试平台</h1>
            <p>安全的身份验证与API接口测试工具</p>
        </div>

        <div class="section-card">
            <h3 class="section-title">
                <i class="fas fa-key"></i>
                身份认证管理
            </h3>
            <div class="token-status" id="tokenStatus">
                <p class="token-status-text">
                    <span class="status-indicator status-success"></span>
                    JWT Token 已获取并保存
                </p>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <div class="form-row">
                        <label class="label-modern">
                            <i class="fas fa-user"></i>
                            用户登录信息
                        </label>
                        <pre id="txtUserInfo" class="ace_editor"></pre>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="button-group">
                        <button class="btn btn-modern" type="button" onclick="GetJwtToken();">
                            <i class="fas fa-sign-in-alt"></i> 获取 JWT 令牌
                        </button>
                        <button class="btn btn-danger-modern" type="button" onclick="ClearJwtToken();">
                            <i class="fas fa-sign-out-alt"></i> 清除 JWT 令牌
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="section-card">
            <h3 class="section-title">
                <i class="fas fa-cogs"></i>
                API 接口测试
            </h3>
            <div class="row">
                <div class="col-md-8">
                    <div class="form-row">
                        <label class="label-modern" for="txtOrderId">
                            <i class="fas fa-hashtag"></i>
                            订单ID
                        </label>
                        <input id="txtOrderId" type="text" class="form-control form-control-modern" value="1152"
                            placeholder="请输入订单ID" />
                    </div>
                    <div class="form-row">
                        <label class="label-modern">
                            <i class="fas fa-file-code"></i>
                            API 响应数据
                        </label>
                        <pre id="txtOrderData" class="ace_editor"></pre>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="button-group">
                        <button type="button" class="btn btn-modern" onclick="GetOrderData();">
                            <i class="fas fa-search"></i> 获取订单信息
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let tokenKey = "AccessToken";
        let headers = {};

        let EditorUserInfo = ace.edit("txtUserInfo", {
            theme: "ace/theme/monokai",
            mode: "ace/mode/json",
            autoScrollEditorIntoView: true,
            enableBasicAutocompletion: true,
            maxLines: 10,
            minLines: 10
        });

        let EditorOrderData = ace.edit("txtOrderData", {
            theme: "ace/theme/monokai",
            mode: "ace/mode/json",
            autoScrollEditorIntoView: true,
            enableBasicAutocompletion: true,
            maxLines: 20,
            minLines: 20
        });

        let LoginUser = {
            UserName: "张三丰",
            Password: "123456"
        };

        EditorUserInfo.session.setValue(JSON.stringify(LoginUser, null, 2));

        function SetHeader() {
            let accessToken = sessionStorage.getItem(tokenKey);
            if (accessToken) {
                headers.Authorization = "Bearer " + accessToken;
                $("#tokenStatus").addClass("show");
            } else {
                $("#tokenStatus").removeClass("show");
            }
        }

        function GetJwtToken() {
            let userInfo = EditorUserInfo.session.getValue();
            $.ajax({
                async: true,
                type: "POST",
                contentType: 'application/json',
                dataType: 'json',
                url: "/Api/Login/GetJwtToken",
                data: userInfo,
                success: function (data, textStatus, jqXHR) {
                    if (data) {
                        sessionStorage.setItem(tokenKey, data.token);
                        $("#tokenStatus").addClass("show");
                        console.log(data);

                        // 显示成功提示
                        showNotification("JWT Token 获取成功！", "success");
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(errorThrown);
                    showNotification("获取 Token 失败：" + errorThrown, "error");
                }
            });
        }

        function ClearJwtToken() {
            sessionStorage.removeItem(tokenKey);
            headers = {};
            $("#tokenStatus").removeClass("show");
            showNotification("JWT Token 已清除", "info");
        }

        function GetOrderData() {
            SetHeader();
            let url = "/Api/Order";
            let data = { id: $("#txtOrderId").val() };
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'json',
                headers: headers,
                data: data,
                success: function (data, textStatus, jqXHR) {
                    if (data) {
                        EditorOrderData.session.setValue(JSON.stringify(data, null, 2));
                        console.log(data);
                        showNotification("订单数据获取成功！", "success");
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    if (jqXHR.responseText) {
                        let json = JSON.parse(jqXHR.responseText);
                        EditorOrderData.session.setValue(JSON.stringify(json, null, 2));
                    } else if (jqXHR.status == 401) {
                        let json = {
                            status: 401,
                            message: jqXHR.statusText,
                            detail: "客户端未授权，请先登录获取令牌（Token）"
                        };
                        EditorOrderData.session.setValue(JSON.stringify(json, null, 2));
                        showNotification("未授权访问，请先获取 JWT Token", "warning");
                    }
                }
            });
        }

        function showNotification(message, type) {
            // 简单的通知功能
            let alertClass = type === 'success' ? 'alert-success' :
                type === 'error' ? 'alert-danger' :
                    type === 'warning' ? 'alert-warning' : 'alert-info';

            let notification = $(`
                <div class="alert ${alertClass} alert-dismissible fade in" role="alert" style="position: fixed; top: 20px; right: 20px; z-index: 9999; min-width: 300px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
                    ${message}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            `);

            $('body').append(notification);

            // 5秒后自动关闭
            setTimeout(() => {
                notification.fadeOut(300, function () {
                    $(this).remove();
                });
            }, 5000);
        }

        // 页面加载时检查token状态
        $(document).ready(function () {
            SetHeader();
        });
    </script>
</body>

</html>